<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>LightningChart® JS Demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>
		<h2 id="wait">Loading lib....</h2>

		<script src="https://cdn.jsdelivr.net/npm/@arction/lcjs@4.0.2/dist/lcjs.iife.js"></script>

		<script>
			function round2(val) {
				return Math.round(val * 100) / 100;
			}

			function round3(val) {
				return Math.round(val * 1000) / 1000;
			}

			function prepData(packed) {
				console.time('prep');

				// epoch,idl,recv,send,read,writ,used,free

				const numFields = packed[0];
				packed = packed.slice(numFields + 1);

			//	var ts = Array(packed.length/numFields);
				var cpu = Array(packed.length/numFields);
				var ram = Array(packed.length/numFields);
				var tcp = Array(packed.length/numFields);

				const dateOrigin = packed[0] * 60 * 1000;

				for (let i = 0, j = 0; i < packed.length; i += numFields, j++) {
					let date = packed[i] * 60 * 1000 - dateOrigin;
					cpu[j] = {x: date, y: round3(100 - packed[i+1])};
					ram[j] = {x: date, y: round2(100 * packed[i+5] / (packed[i+5] + packed[i+6]))};
					tcp[j] = {x: date, y: packed[i+3]};
				}

				console.timeEnd('prep');

				return [cpu, ram, tcp];
			}

			function makeChart(data) {
				console.time('chart');
				const {
					lightningChart,
					SolidLine,
					SolidFill,
					ColorRGBA,
					AxisTickStrategies,
					UIOrigins,
					Themes,
					disableThemeEffects
				} = lcjs;

				const dateOrigin = new Date(1566453600000);

				const chart = lightningChart().ChartXY({
					// Glow and shadow effects are visual candy that are not used for best performance benchmarks. Effect may be some tens of milliseconds slower initial loading and increased GPU use in real-time tests
					theme: disableThemeEffects(Themes.darkGold)
				});

				chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, tickStrategy => tickStrategy.setDateOrigin(dateOrigin));
				chart.getDefaultAxisX().setAnimationScroll(undefined);
				chart.getDefaultAxisX().setAnimationZoom(undefined);
				chart.getDefaultAxisY().setAnimationScroll(undefined);
				chart.getDefaultAxisY().setAnimationZoom(undefined);

				const customStrokeStyle0 = new SolidLine({ fillStyle: new SolidFill({ color: ColorRGBA(255, 0, 0) }), thickness: 1 });
				const customStrokeStyle1 = new SolidLine({ fillStyle: new SolidFill({ color: ColorRGBA(0, 0, 255) }), thickness: 1 });
				const customStrokeStyle2 = new SolidLine({ fillStyle: new SolidFill({ color: ColorRGBA(0, 255, 0) }), thickness: 1 });

				chart.addLineSeries({
					dataPattern: {pattern: 'ProgressiveX'}
				})
				.setName('CPU')
				.setStrokeStyle(customStrokeStyle0)
				.add(data[0]);

				chart.addLineSeries({
					dataPattern: {pattern: 'ProgressiveX'}
				})
				.setName('RAM')
				.setStrokeStyle(customStrokeStyle1)
				.add(data[1]);

				chart.addLineSeries({
					dataPattern: {pattern: 'ProgressiveX'}
				})
				.setName('TCP')
				.setStrokeStyle(customStrokeStyle2)
				.add(data[2]);

				chart.setAutoCursor(cursor =>
					cursor
						.setResultTableAutoTextStyle(true)
						// .disposeTickMarkerX()
						.setTickMarkerYAutoTextStyle(true)
				);

				const legend = chart.addLegendBox()
					.setOrigin(UIOrigins.RightTop)
					.setPosition({ x: 90, y: 90 })
					.setMargin({ left: 10, right: 10, top: 10, bottom: 10 });

				legend.add(chart);

				wait.textContent = "Done!";
				console.timeEnd('chart');
			}

			let wait = document.getElementById("wait");
			wait.textContent = "Fetching data.json (2.07MB)....";
			fetch("data.json").then(r => r.json()).then(packed => {
				wait.textContent = "Rendering...";
				let data = prepData(packed);
				setTimeout(() => makeChart(data), 0);
			});
		</script>

		<p>
			Code based on<br>
			<a href="https://www.arction.com/lightningchart-js-interactive-examples/#edit/lcjs_example_0000_lineSeries">https://www.arction.com/lightningchart-js-interactive-examples/#edit/lcjs_example_0000_lineSeries</a>
		</p>
	</body>
</html>